import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect} from 'mirrorx';
import { List, InputItem, WhiteSpace, WingBlank, Button } from 'antd-mobile';
import { createForm } from 'rc-form';

class App extends React.Component { 
	constructor(props) {
		super(props);
        this.state = {
            errorMap:{}
        }

        const Lang = window.LangMessage ||{};
        this.keyCodes = [
            {
                keycode:"username",
                text: Lang.web_username || "用户名",
                type:"text",
                // message:Lang.input_correct_phone || "请输入正确的手机号",
                // pattern:/[0-9\s]{13}/,
                required:true,  //默认是true
            },
            {
                keycode:"password",
                text:Lang.web_password || "密码",
                type:"password",
                required:true,
            }
        ]
	}

	componentDidMount(){

    }

    onErrorClick=(keyCode)=>{
		const {getFieldError } = this.props.form;
		let msg = getFieldError(keyCode);
		if(msg){
			T.showError(msg.join(","));
		}	
	}

    submit=()=>{
		this.props.form.validateFields((error, values) => {
			var errorMap ={}
			if(error){
				for(var key in error){
					errorMap[key] = 1;
				}
				
			}else{
				values.username = T.trimAll(values.username);				
				T.fetch({				
					url:"/api/1.0/api-token-auth/",
					data:values,
				}).then((res)=>{
                    if(res.token){
                        actions.routing.push('create-qrcode')
                    }else{
						T.showError("认证失败");
					}
				});	
			}

			this.setState({
				errorMap
			});
			console.log(error, values);

			
		});
	}

	render() {
        const { getFieldProps } = this.props.form;
        const Lang = window.LangMessage ||{};
		return (
            <div className="">
                <List>
                    {
                        this.keyCodes.map((item, index)=>{
                            return (<InputItem  key={index}
                                {...getFieldProps(item.keycode,{
                                    rules: [{
                                        required: item.required === undefined ? true:item.required,
                                        message:item.message || ((Lang.text_input ||"请输入") + item.text),
                                        pattern:item.pattern
                                    }]
                                })}
                                labelNumber={10}
                                type={item.type}
                                error ={this.state.errorMap[item.keycode]}
                                onErrorClick={this.onErrorClick.bind(this,item.keycode)}
                                clear
                                placeholder={(Lang.text_input ||"请输入") + item.text}
                                >{item.text}</InputItem>)
                        })
                    }
                </List>
                <WhiteSpace/>
		        <WhiteSpace/>
                <WingBlank>
                    <Button className="diy_background diy_border" type="primary" onClick={this.submit}>{Lang.web_auth || '认证'}</Button>
                </WingBlank>
            </div>
        )
	}
}

const AppForm = createForm()(App);
export default AppForm;